<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.agentName }}
          </span>
          <el-tag size="small" type="warning">
            {{ getLabel('confirmStatus', formData.confirmStatus) }}
          </el-tag>

        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button v-auth="{v:['crm:marketing:cooperationInformation:enterprise:change'],bool:formData?.confirmStatus === '0'}" size="small" type="primary"
          @click="handlChange(1)">
          变更信息
        </el-button>
        <!-- <template v-if="formData">
          <el-button
              v-auth="{v:['crm:marketing:cooperationInformation:enterprise:delete'],bool:formData?.agentStatus === '-1' || formData?.agentStatus === '-5' }"
              class="main-btn" size="small" type="primary" @click="handlDelete">
            删除
          </el-button>

          <template v-if="Number(formData?.agentStatus) > 1  ">
            <template
                v-if="formData.flowStatus !== 'DOING' || formData.flowStatus === 'REPEAL' || formData.flowStatus === 'REJECT_INITIATOR'">
              <el-button v-auth="{v:['crm:marketing:cooperationInformation:enterprise:change']}" size="small"
                         type="primary" @click="handlChange(1)">
                变更信息
              </el-button>
            </template>
          </template>

          <template v-else>
            <el-button v-auth="{v:['crm:marketing:cooperationInformation:enterprise:change'],
          bool:formData?.agentStatus === '-1' ||  formData?.agentStatus === '-6' }" size="small" type="primary"
                       @click="handlChange(2)">
              编辑
            </el-button>
          </template>

        </template> -->
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px">
      <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="代理商编号：">
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="所在地区：">
              {{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content" style="margin-top: 20px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <el-form :inline="true" class="filter-form-inline" label-position="left" label-width="82px" size="small">
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系人：">
                  <span>{{ formData.userName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系电话：">
                  <span>{{ formData.tel }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="统一社会信用代码：" label-width="140px">
                  <span>{{ formData.creditCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建时间：">
                  <span>{{ dateFormat("yyyy-mm-dd HH:MM:SS", formData.createdAt) }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建人：">
                  <span>{{ formData.creatorName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="formData.agentStatus !== '1'" label="代理合同" name="2">
          <contract v-if="activeName === '2'" ref="contractRef" :contract-data="contractData" :tableColumn='false' />
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="3">
          <followUp v-if="activeName === '3'" :objectId="formData?.id"  customerType="1"/>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="4">
          <operation-view v-if="activeName === '4'" mode="agent" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <!--新建潜在代理商 -->
    <agentDialog ref="agentDialog" :type-title="typeTitle" @succsess="succsess" />

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Details",
  components: {
    agentDialog: defineAsyncComponent(() =>
      import("../modules/potentialAgent/agentDialog.vue")
    ),
    contract: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contract/contract.vue")
    ),
    followUp:defineAsyncComponent(()=>
    import("@CRM/views/marketing/customer/modules/followUp.vue"))
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    var data = reactive({
      agentDialog: null,
      formSign: null,
      typeTitle: "",
      formData: {},
      activeName: "1",
      contractRef: null,
      contractData: {
        id: Number(route.query.id),
        name: "",
        contractType: "agent",
        contractObjectType: "agent",
        title: "代理合同详情",
        disabled: true,
        pms: ["crm:marketing:cooperationInformation:enterprise:contract:all"],
      },
    });

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
          data.contractData.name = res.data.data.agentName;
        }
      });
    };

    const handlDelete = () => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.channelAgent
            .POTENTIALAGENT_DELETE_LIST(route.query.id)
            .then((res) => {
              if (res.code === 0) {
                handlBack();
              } else {
                currentInstance.proxy.customMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 变更
    const handlChange = (num) => {
      data.typeTitle = "变更潜在代理商";
      setTimeout(() => {
        data.agentDialog.open(data.formData, num);
      }, 100);
    };

    const succsess = () => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    };

    //* *****************
    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });
    //* *****************
    return {
      ...toRefs(data),
      handlBack,
      handlChange,
      handlDetail,
      succsess,
      handlDelete,
    };
  },
};
</script>

<style scoped>
:deep(.col) {
  padding: 0 !important;
}
</style>
